
var that;
class Tab {
    constructor(id) {
        //获取元素
        that = this;        //===这里this保存的是#tab，就是最外面的div，然后把这个赋值给that
                            //console.log(id)       //#tab
        this.main = document.querySelector('#tab');
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
                            console.log(that)    //tab
                            console.log(that === this)  //true
        this.init();
    }
    // 初始化绑定事件
    init() {                //被构造器调用，这时候的this还是#tab
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab;
        }
    }
    // 清除li 和 section 的class
    clearClass() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
    // tab切换功能
    toggleTab() {
        that.clearClass();
        this.className = 'active';
        that.sections[this.index].className = 'conactive';

    }
}
new Tab('#tab');



